@import '../../assets/stylesheets/colors.scss';
@import '../../assets/stylesheets/fonts.scss';

.search-container {
  position: relative;
  // color: white;
}

ul.options li:hover {
  font-weight: bold;
  color: #00b4cc;
  cursor: pointer;
  transition: 0.3s all;
}

ul.options li.option-active {
  background: whitesmoke;
  color: #00b4cc;
}

.options {
  background-color: white;
  overflow: auto;
  position: absolute;
  z-index: 1;
  width: -webkit-fill-available;
}

.react-test-options {
  background-color: white;
  overflow: auto;
  position: absolute;
  z-index: 4;
  width: 137px;
}
ul.react-test-options li:hover {
  font-weight: bold;
  color: #00b4cc;
  cursor: pointer;
  transition: 0.3s all;
}

ul.react-test-options li.option-active {
  background: whitesmoke;
  color: #00b4cc;
}

.HooksTestCaselight {
  gap: 10px;
  --input-color: black;
  --describe-button-color: white;
  --describe-button-bg: #{$mint};
}

.HooksTestCasedark {
  gap: 10px;
  --input-color: white;
  --describe-button-color: #{$eggshell};
  --describe-button-bg: #{$salmon};
}

.flexContainer {
// align-items: center;
  flex: 0 0 40px;
  display: flex;
  svg {
    color: var(--input-color);
  }
  div {
    max-width: 250px;
  }
  input {
    border-color: var(--input-color);
    color: var(--input-color);

    &::placeholder {
      color: var(--input-color);
    }
  }
  label {
    color: var(--input-color);
  }
  button {
    font-size: 0.75rem;
    color: var(--input-color);
    border-color: var(--input-color);
  }

}

.flex-item {
  width: 200px;
  margin-right: 7%;
  input {
    width: 100%;
  }
  position: relative;
}
